<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../build/mxreality.js"></script>
</head>
<body>

<script type="text/javascript">
    window.onload=function () {
        video = AVR.createTag('video', {
            'webkit-playsinline': true,
            'playsinline': true,
            'preload': 'auto',
            'x-webkit-airplay': 'allow',
            'x5-playsinline': true,
            'x5-video-player-type': 'h5',
            'x5-video-player-fullscreen': true,
            'x5-video-orientation': 'portrait',
            'style': 'object-fit: fill',
            'autoplay':"autoplay"
        }, {
            'allowsInlineMediaPlayback': true
        });

        //video.style.display = "none";
        video.style.zIndex="-9999999";
        //video.style.position="absolute";
        video.oncanplaythrough = function () {
            //video.style.marginTop = "-"+video.videoHeight -2+"px";
            //video.style.top = "-"+video.videoHeight -2+"px";

        }
        document.body.appendChild(video);

        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
        window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;
        var exArray = [];
        if (navigator.getUserMedia) {
            var medias = {
                audio: false,
                video: {
                    facingMode: {
                        exact: "environment"
                        //exact: 'user'
                    }
                }
            }

            navigator.getUserMedia(medias, successCallback, errorCallback);


        } else {
            alert('Native device meadia streaming(getUserMdeia) not supported in this browser.')
        }


        function successCallback(stream) {
            video.srcObject = stream;
        };

        function errorCallback(err) {
            alert(err);
        }
        var canvas2 =document.createElement('canvas');
        canvas2.style.width=window.innerWidth+"px";
        canvas2.style.height=window.innerHeight+"px";
        canvas2.style.position="absolute";
        canvas2.style.top="0px";
        canvas2.style.left="0px";
        document.body.appendChild(canvas2);

        var videoCanvas=canvas2.getContext('2d');
        // 将视频帧绘制到Canvas对象上,Canvas每60ms切换帧，形成肉眼视频效果
        setInterval(function () {
            if(video) {
                videoCanvas.drawImage(video, 0, 0, window.innerWidth, window.innerHeight);
            }
        }, 60);

    }

</script>
</body>
</html>